<template>
  <view>
    <u-tabbar
      v-model="tabbarCurrent"
      active-color="#333333"
      inactive-color="#333333"
      :list="vTabbars"
      :mid-button="true"
      height="110"
      @change="change"
    ></u-tabbar>
    <BasePopup :show.sync="isShowPopup" mode="center" width="690" radius="20">
      <view class="sweep">
        <!-- banner -->
        <view class="banner">
          <image src="@/static/img/sweep-banner.png" />
          <view @click.stop="isShowPopup = false" class="closeBanner">
            <!-- <img src="" style="height: 56rpx; width: 56rpx" alt /> -->
            <BaseIcon name="close" color="#fff" size="30" />
          </view>
        </view>
        <view class="content">
          <!-- relative -->
          <view class="logo">
            <img
              style="height: 172rpx; width: 172rpx"
              :src="vSiteConfig.site_info.site_logo"
              alt
            />
          </view>
          <view class="operationContent" v-if="isSuccess">
            <view class="operation">
              <view
                v-for="(item, index) in sweepFunc"
                :key="index"
                class="deviceDetails"
                @click="toModule(item.url)"
              >
                <img
                  v-if="index == 1"
                  src="@/static/img/index_scan/goodsSet.png"
                  alt
                  style="height: 75rpx; width: 75rpx"
                  @click.stop="toModule(item.url)"
                />
                <img
                  v-else
                  style="height: 75rpx; width: 75rpx"
                  :src="item.src"
                  alt
                />
                <view>{{ item.name }}</view>
              </view>
            </view>
          </view>
          <view v-else>
            <view class="fail" :class="!isSuccess ? 'fail' : ''">
              <view class="failDesc">请扫描正确的二维码</view>
              <view class="reSweep" @click="sweepCode">重新扫描</view>
            </view>
          </view>
        </view>
      </view>
    </BasePopup>
  </view>
</template>

<script>
import { getUrlParams, getUrlDynamicData } from "@/common/tools/utils.js";
import BasePopup from "../../components/base/BasePopup.vue";
import BaseIcon from "../../components/base/BaseIcon.vue";
export default {
  components: { BasePopup, BaseIcon },
  data() {
    return {
      mid: "",
      vscode: "",
      device_sn: "",
      sweepFunc: [],
      isShowPopup: false,
      isSuccess: false,
    };
  },
  methods: {
    change(e) {
      if (e == 1) {
        //点击了扫码
        this.sweepCode();
      }
    },
    sweepCode() {
      uni.scanCode({
        onlyFromCamera: false,
        scanType: ["qrCode", "barCode"],
        success: async ({ result, scanType, charSet, path }) => {
          console.log("🚀 ~ result 解析前 ", result);
          result = decodeURIComponent(result);
          console.log("🚀 ~ result 解析后 ", result);
          if (!result) return;
          if (result.includes("vscode")) {
            this.vscode = getUrlParams(result, "vscode");
            console.log("🚀 ~ this.vscode", this.vscode);
            // 小程序扫码蓝牙码
            let data = {
              vscode: result.split("=")[1],
            };
            let rtn = await this.$u.api.getUMVscode(data);
            this.mid = rtn?.id;
          } else if (result.includes("mid")) {
            this.mid = getUrlDynamicData(result, "mid");
          } else if (result.includes("coupon/index/id")) {
            //跳转到优惠券核销界面
            //https://towel.wrlsw.com/response/coupon/index/id/1
            const id = getUrlDynamicData(result, "id");
            if (!id) return this.isShowErr("核销二维码格式错误~");
            uni.navigateTo({ url: `/pagesB/coupon/CouponCheck?id=${id}` });
            return;
          } else {
            if (result.includes("device_sn")) {
              this.device_sn = getUrlDynamicData(result, "device_sn");
            } else {
              this.device_sn = result;
            }
            console.log("🚀 ~ this.device_sn", this.device_sn);
            let data = {
              device_sn: this.device_sn,
            };
            let rtn = await this.$u.api.getUMByDeviceSn(data);
            this.mid = rtn?.id;
          }
          console.log("🚀 ~   this.mid", this.mid);
          if (this.mid > 0) {
            this.sweepFunc = [];
            let param = "?from=index_scan&mid=" + this.mid;
            if (this.vUserInfo.role_id >= 1 && this.vButtonPermisFour) {
              this.sweepFunc.push({
                name: "绑定" + this.vPointName,
                src: "./../../static/img/index_scan/bind.png",
                url: "/pagesB/place/BindPlace" + param,
              });

              this.sweepFunc.push({
                name: "设备操作",
                src: " ./../../static/img/index_scan/goodsSet.png",
                url:
                  "/pagesB/device/DeviceGoodsList" +
                  param +
                  "&isFrom=replenish",
              });
              // this.sweepFunc.push({
              //   name: "设备商品",
              //   src: "./../../static/img/index_scan/deviceDetails.png",
              //   url:
              //     "/pagesB/device/DeviceGoodsList" +
              //     param +
              //     "&isFrom=device_goods",
              // });

              this.sweepFunc.push({
                name: "领取设备",
                src: "./../../static/img/index_scan/finance.png",
                url: "/pagesB/device/DeviceActivate" + param,
              });

              this.sweepFunc.push({
                name: "分配设备",
                src: "./../../static/img/index_scan/deviceDetails.png",
                url: "/pagesB/device/DeviceAllot" + param,
              });
              // this.sweepFunc.push({
              //   name: "遥控设备",
              //   src: "./../../static/img/index_scan/remote.png",
              //   url: "/pagesB/remote/RemoteEquipment" + param,
              // });
              // this.sweepFunc.push({
              //   name: "关联设备",
              //   src: "./../../static/img/index_scan/relevance-equipment.png",
              //   url: "/pagesB/relevance/RelevanceEquipment" + param,
              // });
            } else if (this.vUserInfo.role_id == 5) {
              this.sweepFunc.push({
                name: "绑定" + this.vPointName,
                src: "./../../static/img/index_scan/bind.png",
                url: "/pagesB/place/BindPlace" + param,
              });

              this.sweepFunc.push({
                name: "设备操作",
                src: " ./../../static/img/index_scan/goodsSet.png",
                url:
                  "/pagesB/device/DeviceGoodsList" +
                  param +
                  "&isFrom=replenish",
              });

              this.sweepFunc.push({
                name: "领取设备",
                src: "./../../static/img/index_scan/finance.png",
                url: "/pagesB/device/DeviceActivate" + param,
              });
            } else if (this.vUserInfo.role_id == 7) {
              // this.sweepFunc.push({
              //   name: "绑定" + this.vPointName,
              //   src: "./../../static/img/index_scan/bind.png",
              //   url: "/pagesB/place/BindPlace" + param,
              // });
              this.sweepFunc.push({
                name: "领取设备",
                src: "./../../static/img/index_scan/finance.png",
                url: "/pagesB/device/DeviceActivate" + param,
              });
              this.sweepFunc.push({
                name: "设备操作",
                src: " ./../../static/img/index_scan/goodsSet.png",
                url:
                  "/pagesB/device/DeviceGoodsList" +
                  param +
                  "&isFrom=replenish",
              });

              
              // this.sweepFunc.push({
              //   name: "遥控设备",
              //   src: "./../../static/img/index_scan/remote.png",
              //   url: "/pagesB/remote/RemoteEquipment" + param,
              // });
            } else {
              this.sweepFunc.push({
                name: "设备操作",
                src: " ./../../static/img/index_scan/goodsSet.png",
                url:
                  "/pagesB/device/DeviceGoodsList" +
                  param +
                  "&isFrom=replenish",
              });
              // 直接补货界面
              uni.navigateTo({
                url:
                  "/pagesB/device/DeviceGoodsList" +
                  param +
                  "&isFrom=replenish",
              });
            }
            this.isShowPopup = true;
            this.isSuccess = true;
          } else {
            this.isShowErr("请扫码正确的二维码,二维码信息" + result, 1);
          }
        },
        fail: (error) => {},
      });
    },
    toModule(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sweep {
  .banner {
    position: relative;
    image {
      width: 100%;
      height: 183rpx;
    }

    .closeBanner {
      position: absolute;
      top: 16rpx;
      right: 16rpx;
    }
  }
  .content {
    position: relative;
    width: 100%;
    height: 450rpx;
    background-color: white;
    .logo {
      position: absolute;
      left: 261rpx;
      top: -95rpx;
      img {
        width: 172rpx;
        height: 172rpx;
        border-radius: 172rpx;
      }
    }
    .operationContent {
      display: flex;
      justify-content: space-between;
      align-items: center;  
      .operation {
        width: 100%;
        display: flex;
        // justify-content: space-between;
        // align-items: center; 
        flex-wrap: wrap;
        top: 155rpx;
        padding: 155rpx 30rpx 0;
        transition: all 1s ease-in-out;
        > view {
          width: 24.5%;
          display: flex;
          justify-content: space-between;
        
          flex-direction: column;
          align-items: center;
          font-size: 30rpx;
          margin-bottom: 10rpx;
          view {
            margin-top: 26rpx;
          }
        }
      }
    }

    .fail {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding-top: 166rpx;
      .failDesc {
        font-size: 36rpx;
        color: $themeComColor;
      }
      .reSweep {
        text-decoration: underline;
        color: rgba(40, 40, 40, 1);
        font-size: 30rpx;
      }
    }
  }
}
</style>
